<template>
  <div>
    <div class="recommend">
      <div class="main">
        <div class="recommend-title">我的推荐</div>
        <div class="text-container">
          <div class="userNum">
            累计激活用户数量:
            <span style="color: red;">{{ shareNum }}</span>
            位
          </div>
          <span>活动规则：</span>
          <ul>
            <li>
              <span class="num"> 1</span>
              每位新老用户都可以通过点击页面右边上角的微信分享按钮参加本活动推广。
            </li>
            <li>
              <span class="num">2</span
              >当新用户实名认证后，才能算是一个有效激活。
            </li>
            <li>
              <span class="num">3</span>活动奖励将在新用户激活成功后发放到“
              <nuxt-link
                style="color: red;"
                :to="'/' + enterpriseId + '/coupon'"
                >我的优惠券</nuxt-link
              >” 中。
            </li>
          </ul>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import settings from "~/settings";
import wx from "weixin-js-sdk";
import { mapGetters } from "vuex";
import { getEnterpriseId } from "@/utils/getEnterpriseId";
import { getAuthen } from "@/utils/getAuthen";
export default {
  name: "Recommend",
  head() {
    return {
      title: "推荐有奖"
    };
  },
  data() {
    return {
      shareNum: 0,
      shareData: {
        title: "推荐有奖",
        desc: "推荐分享，领取优惠券",
        link:
          settings.baseUrl +
          getEnterpriseId() +
          `/my?shareUserId=${this.$store.state.authen.userInfo.userId}`, // 分享个人用户首页。如：https://yftx-map-test.xailife.com/173/my?shareUserId=481719
        imgUrl: ""
      },
      wxconfig: {}
    };
  },
  computed: {
    ...mapGetters({
      userInfo: "authen/userInfo"
    })
  },
  async created() {
    if (!this.userInfo.mobilePhone) {
      getAuthen();
      return false;
    }
    this.getShareCountData();
  },
  async mounted() {
    // 监听页面隐藏和显示
    document.addEventListener("visibilitychange", this.handelVisibilitychange);

    // 获取wx.config所需参数。
    // "onMenuShareTimeline", //  老版本的分享到朋友圈
    //     "onMenuShareAppMessage" //  老版本的分享给朋友
    this.wxconfig = await $nuxt.$store.dispatch("authen/getSdkConfigNew", {
      jsApiList: [
        "updateAppMessageShareData", // 1.4版本的 分享给朋友及QQ
        "updateTimelineShareData", // 1.4版本的分享到朋友圈及 QQ空间
        "onMenuShareTimeline", //  老版本的分享到朋友圈
        "onMenuShareAppMessage" //  老版本的分享给朋友
      ],
      openTagList: ""
    });
    // 注入配置
    wx.config({
      // debug: this.wxconfig.debug,
      debug: this.wxconfig.debug,
      appId: this.wxconfig.appId, // 必填，公众号的唯一标识
      timestamp: this.wxconfig.timestamp, // 必填，生成签名的时间戳
      nonceStr: this.wxconfig.nonceStr, // 必填，生成签名的随机串
      signature: this.wxconfig.signature, // 必填，签名
      jsApiList: this.wxconfig.jsApiList // 必填，需要使用的JS接口列表。
    });

    wx.ready(() => {
      // 判断当前客户端版本是否支持指定的接口
      wx.checkJsApi({
        jsApiList: ["updateAppMessageShareData", "updateTimelineShareData"],
        success: res => {
          console.log("当前客户端可以调用哪些api：", res);
        }
      });
      // 自定义“分享给朋友”及“分享到QQ”按钮的分享内容
      wx.updateAppMessageShareData({
        title: "推荐有奖",
        desc: "推荐分享，领取优惠券",
        link:
          settings.baseUrl +
          getEnterpriseId() +
          `/my?shareUserId=${this.$store.state.authen.userInfo.userId}`, // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
        imgUrl: "https://yftx-map.xailife.com/_nuxt/img/recommand.cf38928.png", // 分享图标，要能直接访问的链接，并且跟项目同一个域名
        success: function(res) {
          // 设置成功
          console.log(res);
        }
      });

      // 自定义“分享到朋友圈”及 “分享到QQ空间”按钮的分享内容
      wx.updateTimelineShareData({
        title: "推荐有奖",
        desc: "推荐分享，领取优惠券",
        link:
          settings.baseUrl +
          getEnterpriseId() +
          `/my?shareUserId=${this.$store.state.authen.userInfo.userId}`,
        imgUrl: "https://yftx-map.xailife.com/_nuxt/img/recommand.cf38928.png",
        success: function(res) {
          console.log(res);
        }
      });

      // 获取“分享到朋友圈”按钮点击状态及自定义分享内容接口（即将废弃）
      wx.onMenuShareTimeline({
        title: "推荐有奖",
        desc: "推荐分享，领取优惠券",
        link:
          settings.baseUrl +
          getEnterpriseId() +
          `/my?shareUserId=${this.$store.state.authen.userInfo.userId}`,
        imgUrl: "https://yftx-map.xailife.com/_nuxt/img/recommand.cf38928.png",
        success: function(res) {
          // 用户点击了分享后执行的回调函数
          console.log(res);
        }
      });

      // 获取“分享给朋友”按钮点击状态及自定义分享内容接口（即将废弃）
      wx.onMenuShareAppMessage({
        title: "推荐有奖",
        desc: "推荐分享，领取优惠券",
        link:
          settings.baseUrl +
          getEnterpriseId() +
          `/my?shareUserId=${this.$store.state.authen.userInfo.userId}`,
        imgUrl: "https://yftx-map.xailife.com/_nuxt/img/recommand.cf38928.png",

        success: async () => {
          // 用户分享成功后才触发，调用接口
          console.log("分享成功");
        },
        cancel: function(res) {
          // 用户取消分享后执行的回调函数
          console.log(res, "取消分享");
        }
      });
      wx.error(function(res) {
        console.log("错误信息", res);
      });
    });
  },
  methods: {
    // 获取分享次数
    async getShareCountData() {
      const res = await this.$axios.$get("/getShareCount", {
        params: {
          userId: this.$store.state.authen.userInfo.userId
        }
      });
      this.shareNum = res;
    },
    // 监控界面隐藏与展示情况，页面隐藏是调用增加次数接口
    async handelVisibilitychange() {
      // console.log(settled);
      let pageVisibleStaus = document.visibilityState;
      if (pageVisibleStaus == "hidden") {
        /**
         * 页面隐藏，以下操作，会让页面隐藏
         *
         * 1、可能是点击了手机右上角的微信浏览器分享按钮
         * 2、可能是停留在当前页面，然后切换到了其他app
         * **/
        // 增加分享次数
        // await this.$axios.$post(
        //   `/increaseShareCount?userId=${this.$store.state.authen.userInfo.userId}`
        // );
      }
      if (pageVisibleStaus == "visible") {
        /***
         * 页面显示
         * 1、可能是正常通过会员中心渠道进入推荐有奖页面
         * 2、可能是直接通过分享出去的链接进来
         * **/
        this.getShareCountData();
      }
    }
  },
  beforeDestroy() {
    document.removeEventListener(
      "visibilitychange",
      this.handelVisibilitychange
    );
  }
};
</script>
<style lang="scss" scoped>
.recommend {
  // _id文件夹下的路径
  // background: url("../../../static/recommend/recommed_bg.webp") no-repeat;
  // pages下面的路径
  background: url("../../../static/recommend/recommed_bg.webp") no-repeat;
  background-size: 100% 100%;
  width: 100vw;
  height: 100vh;
  position: relative;
  display: flex;
  justify-content: center;
  box-sizing: border-box;
  .main {
    position: absolute;
    display: flex;
    justify-content: center;
    align-items: center;
    // top: 5.5rem;
    bottom: 0.5rem;
    background-color: #fff;
    width: 80vw;
    border-radius: 0.3rem;
    padding: 0.5rem;
    img {
      width: 1rem;
      position: absolute;
      top: -5.4rem;
      right: 0rem;
    }
    .recommend-title {
      width: 3rem;
      height: 1rem;
      line-height: 1rem;
      background-color: #f9b30b;
      color: #fff;
      position: absolute;
      top: -0.5rem;
      font-size: 0.5rem;
      text-align: center;
      border-radius: 0.7rem;
      box-shadow: 1px 2px 7px grey;
    }
    .text-container {
      span {
        display: inline-block;
        margin-top: 0.1rem;
        margin-bottom: 0.1rem;
        font-size: 0.3rem;
      }
      .userNum {
        font-size: 0.4rem;
        text-align: center;
        letter-spacing: 2px;
        position: relative;
        margin-top: 0.3rem;
        border-bottom: 0.06rem dashed #ff6a70;
        padding-bottom: 0.2rem;
        span {
          font-size: 0.4rem;
        }
      }
      ul {
        li {
          margin-bottom: 0.1rem;
          font-size: 0.3rem;
          line-height: 0.3rem;
          .num {
            border: 1px solid black;
            border-radius: 50%;
            width: 0.3rem;
            display: inline-block;
            height: 0.3rem;
            text-align: center;
            line-height: 0.3rem;
            transform: scale(0.9);
          }
          .nuxt-link-active {
            color: red;
          }
        }
      }
    }
  }
}
</style>
